<template>
  <div>
    <FootNav :current-page="currentPage" @go-back="goBack" />
    <div class="content">
      <webview
        :class="['iframe-content']"
        :src="currentPage.page"
        webpreferences="enableBlinkFeatures=WebHID,webSecurity=false,nodeIntegration=true,contextIsolation=false"
        @ipc-message="handleMessage"
      />
    </div>
  </div>
</template>
<script setup>
import FootNav from './components/FootNav.vue'
import { ref, watch, computed } from 'vue'
import { useHidStore } from './stores/useHidStore'

const hidStore = useHidStore()
const currentLanguage = computed(() => hidStore.currentLanguage)

const URL = 'https://hubtest.eweadn.cn'

const currentPage = ref({
  page: URL,
  type: 'deviceList'
})

// 组装目标url
const assembleTargetUrl = (URL,path) => {
  if(path.includes('http')){
    return path
  }else{
    // if path is  ./开头的去掉前端的点
    if(path.startsWith('.')){
      path = path.substring(1) // 去掉前面的 .
    }
    return `${URL}${path}`
  }
}
// 处理webview消息
const handleMessage = (event) => {
  console.log('event', event)
  const currentDeviceUrl = assembleTargetUrl(URL,event.args[0])
  console.log('currentDeviceUrl', currentDeviceUrl)
  currentPage.value.page = currentDeviceUrl
  currentPage.value.type = 'deviceDetail'
}

const goBack = () => {
  currentPage.value.page = URL
  currentPage.value.type = 'deviceList'
}

</script>
<style>
body,
html {
  background-color: #fff;
  height: 100vh;
  padding: 0;
  margin: 0;
}
.content {
  height: calc(100vh - 50px); /* FootNav总高度为50px */
  width: 100%;
  position: relative;
}
.iframe-content {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: none;
  outline: none;
  margin: 0;
  padding: 0;
}
.hide {
  position: absolute;
  top: -100vh;
  left: -100vw;
}
</style>
